// 渲染图表
function renderCharts() {
    const csvData = localStorage.getItem('csvData');
    if (!csvData) return;

    const rows = csvData.split('\n').filter(row => row);
    const headers = rows[0].split(',');
    const dataRows = rows.slice(1);

    const ids = dataRows.map(row => parseInt(row.split(',')[0]));
    const score1 = dataRows.map(row => parseInt(row.split(',')[5]));
    const categories = dataRows.map(row => row.split(',')[4]);
    const score2 = dataRows.map(row => parseInt(row.split(',')[6]));
    const score3 = dataRows.map(row => parseInt(row.split(',')[7]));

    // 折线图
    const lineTrace = {
        x: ids,
        y: score1,
        type: 'scatter',
        mode: 'lines+markers'
    };
    const lineLayout = { title: 'score1 随 id 变化' };
    Plotly.newPlot('lineChart', [lineTrace], lineLayout);

    // 饼图
    const categoryCount = {};
    categories.forEach(category => {
        categoryCount[category] = (categoryCount[category] || 0) + 1;
    });
    const pieLabels = Object.keys(categoryCount);
    const pieValues = Object.values(categoryCount);
    const pieTrace = {
        labels: pieLabels,
        values: pieValues,
        type: 'pie'
    };
    const pieLayout = { title: 'category 类别统计' };
    Plotly.newPlot('pieChart', [pieTrace], pieLayout);

    // 3D 散点图
    const scatter3dTrace = {
        x: score1,
        y: score2,
        z: score3,
        mode: 'markers',
        type: 'scatter3d'
    };
    const scatter3dLayout = { title: 'score1, score2, score3 三维能力坐标分布' };
    Plotly.newPlot('scatter3dChart', [scatter3dTrace], scatter3dLayout);
}

window.addEventListener('load', renderCharts);
